import React from "react";
import './index.css'
import { AutoSizer, List } from 'react-virtualized';
import 'react-virtualized/styles.css'; // 导入默认样式

export default function DataListModal({ title, type, dataList, onItemClick, onCloseClick }) {

    // 渲染每一行的内容
    function rowRenderer({
        key,         // Unique key within array of rows
        index,       // 索引号
        isScrolling, // 当前项是否正在滚动中
        isVisible,   // 当前项在List中是可见的
        style        // 重点属性：一定要给每一个行数添加该样式
    }) {
        return (
            <div className="dataListModalListRow"
                key={key}
                style={style}
                onClick={() => onItemClick(type, dataList[index])}>
                <span className="dataListModalListTitle">{dataList[index].title}</span>
                <div className="dataListModalListLine"></div>
            </div>
        )
    }

    return (
        <div className="dataListModalRoot">
            <div className="dataListModalTransparent"></div>
            <div className="dataListModalContent">
                <h2 className="dataListModalTitle">{title}</h2>
                <div className="dataListModalList">
                    <AutoSizer>
                        {({ width, height }) => (
                            <List
                                width={width}
                                height={height}
                                rowCount={dataList.length}
                                rowHeight={44}
                                rowRenderer={rowRenderer}
                            />
                        )}
                    </AutoSizer>
                </div>
                <button onClick={onCloseClick}>Close</button>
            </div>
        </div>
    )
}